<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { getPollutant,radar} from "@/api/air/pollutant";
const animationDuration = 500

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    // { name: 'PM2.5', max: 100 },
    //         { name: 'SO2', max: 50 },
    //         { name: 'NO2', max: 100 },
    //         { name: 'PM10', max: 300 },
    //         { name: 'CO', max: 1 },
    //         { name: 'O3', max: 100 }
    return {
      maxPM25:100,
      maxSo2:20,
      maxCo:1,
      maxPM10:100,
      maxO3:100,
      maxNo2:100,
      
      chartData:{
        dailyData:[],
        weeklyData:[],
        monthlyData:[],
      },
      daily:{   pm25: null,
          so2: null,
          no2: null,
          pm10: null,
          co: null,
          o3: null,},
        weekly:{
          pm25: null,
          so2: null,
          no2: null,
          pm10: null,
          co: null,
          o3: null,
        },
        monthly:{ pm25: null,
          so2: null,
          no2: null,
          pm10: null,
          co: null,
          o3: null,},
      dataList:{},
     
      chart: null,
    }
  },
  created(){
    this.getPollutantData();
    // console.log(this.chartData)
  },
  mounted() {

    this.$nextTick(() => {
      console.log("mounted");
      // setInterval()
      this.initChart()
    })

  },
  // created(){
  //   this.getPollutantData();
  // },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch:{
    chartData:{
      handler(newValue){
        this.updateChart();
      },
      // deep: true,
    }
  },

  methods: {
    updateChart(){
      this.chart.setOption({
        series:[{
          data:[
            {
            value: this.chartData.dailyData,
              name: '24小时',
          },
          {
              value: this.chartData.weeklyData,
              name: '7天'
            },
            {
              value: this.chartData.monthlyData,
              name: '30天'
            },
        ]
        }]
      })
    },
    getPollutantData(){
     
      radar().then(response=>{
        this.dataList = response.rows;
        // console.log(this.dataList);
        var value = ''
        const pollutants = ['pm25', 'so2', 'no2', 'pm10', 'co', 'o3'];
          for (const pollutant of pollutants) {
              if(pollutant=='pm25'){
                value = this.maxPM25;
              }else if(pollutant == 'so2'){
                value = this.maxSo2;
              }else if(pollutant == 'no2'){
                value = this.maxNo2;
              }else if(pollutant == 'pm10'){
                value = this.maxPM10;
              }else if(pollutant == 'co'){
                value = this.maxCo;
              }else if(pollutant == 'o3'){
                value = this.maxO3;
              }


              if(this.dataList[0][pollutant]<=value){
                this.daily[pollutant] = this.dataList[0][pollutant];
              }else{
                this.daily[pollutant] = value;
              }
              if(this.dataList[1][pollutant]<=value){
              this.weekly[pollutant] = this.dataList[1][pollutant];
              }else{
                this.weekly[pollutant] = value;
              }
              if(this.dataList[2][pollutant]<=value){
                this.monthly[pollutant] = this.dataList[2][pollutant];
              }else{
                this.monthly[pollutant] = value;
              }
          }
       
        // console.log(this.daily.pm25)

    // Push pollutant data into arrays
    for (const pollutant of pollutants) {
      this.chartData.dailyData.push(this.daily[pollutant]);
      this.chartData.weeklyData.push(this.weekly[pollutant]);
      this.chartData.monthlyData.push(this.monthly[pollutant]);
    }
        this.initChart();
        return response;

      })
    }
    ,
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ['#af6bcc', '#FFE434','#ffab66'],
        radar: {
          nameGap : 5 ,//指示器名称和指示器轴的距离。
          axisName: {
            fontSize:10,
            color:'black'
          },
          radius: 120,
          shape: 'circle',
          startAngle: 90,
          center: ['50%', '55%'],
          splitNumber: 4,
          splitArea: {
            areaStyle: {
              color: 'rgba(127,95,132,.3)',
              opacity: 1,
              // shadowBlur: 45,
              // shadowColor: 'rgba(0,0,0,.5)',
              // shadowOffsetX: 0,
              // shadowOffsetY: 15,
              color: ['#79dbff', '#8bb8e5', '#64AFE9', '#428BD4'],
          // shadowColor: 'rgba(0, 0, 0, 0.2)',
          // shadowBlur: 10
            }
          },
          indicator: [
            { name: 'PM2.5', max: this.maxPM25 },
            { name: 'SO2', max: this.maxSo2 },
            { name: 'NO2', max: this.maxNo2 },
            { name: 'PM10', max: this.maxPM10 },
            { name: 'CO', max: this.maxCo },
            { name: 'O3', max: this.maxO3 }
          ]
        },
        legend: {
          left: 'center',
          // bottom: '200',
          data: ['24小时','7天','30天']
        },
        axisName: {
        // formatter: '{value}',
        color: '#428BD4'
      },
        splitArea: {
        // areaStyle: {
        //   color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
        //   shadowColor: 'rgba(0, 0, 0, 0.2)',
        //   shadowBlur: 10
        // }
      },
      //   axisLine: {
      //   lineStyle: {
      //     color: 'rgba(211, 253, 250, 0.8)'
      //   }
      // },
      // splitLine: {
      //   lineStyle: {
      //     color: 'rgba(211, 253, 250, 0.8)'
      //   }
      // },
        series: [{
          type: 'radar',
          tooltip: {
        trigger: 'item'
      },
          emphasis: {
        lineStyle: {
          width: 4
        }
      },
          data: [
            {
              value: this.chartData.dailyData,
              name: '24小时',
            },
            {
              value: this.chartData.weeklyData,
              name: '7天'
            },
            {
              value: this.chartData.monthlyData,
              name: '30天'
              
            },
          ],
          animationDuration: animationDuration
        }]
      })
    }
  }
}
</script>
